<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">提现配置</div>
      <div class="ele-page-desc">
        用于用户佣金提现参数配置。
      </div>
    </div>
    <div class="ele-body">
      <el-card shadow="never">
        <el-form ref="form"
                 :model="form"
                 :rules="rules"
                 label-width="120px">

          <el-row :gutter="20">
            <el-col :sm="11">
              <el-form-item label="是否开启:"
                            prop="distribution_level">
                <el-radio-group v-model="form.distribution_level">
                  <el-radio :label="0"
                            value="0"
                            checked="true">开启</el-radio>
                  <el-radio :label="1"
                            value="1">隐藏</el-radio>

                </el-radio-group>
              </el-form-item>

              <el-form-item label="分销等级:"
                            prop="distribution_level">
                <el-radio-group v-model="form.distribution_level">
                  <el-radio :label="0"
                            value="0"
                            checked="true">一级分销</el-radio>
                  <el-radio :label="1"
                            value="1">二级分销</el-radio>

                </el-radio-group>
              </el-form-item>

              <el-form-item label="一级分销:"
                            prop="distribution_one">
                <el-input v-model="form.distribution_one"
                          style="width: 250px;"
                          min="0"
                          max="100"
                          type="number"
                          placeholder="一级分销收益比例"
                          clearable>
                  <template slot="append">%</template>
                </el-input>
                <div style="color: #b4b4b4">每笔回收订单完成时计算，分销佣金=用户总价●分销比例</div>
              </el-form-item>

              <el-form-item label="二级分销:"
                            prop="distribution_two">
                <el-input v-model="form.distribution_two"
                          style="width: 250px;"
                          min="0"
                          max="100"
                          type="number"
                          placeholder="二级分销收益比例"
                          clearable>
                  <template slot="append">%</template>

                </el-input>
                <div style="color: #b4b4b4">每笔回收订单完成时计算，分销佣金=用户总价●分销比例</div>
              </el-form-item>

              <el-form-item label="最低提现金额:"
                            prop="lowest_withdraw">
                <el-input v-model="form.lowest_withdraw"
                          style="width: 250px;"
                          placeholder="请输入最低提现金额"
                          clearable>
                  <template slot="append">￥</template>
                </el-input>
              </el-form-item>

              <el-form-item label="提现手续费率:"
                            prop="handling_fee">
                <el-input v-model="form.handling_fee"
                          min="0"
                          max="100"
                          type="number"
                          style="width: 250px;"
                          placeholder="请输入提现手续费"
                          clearable>
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="分销海报:"
                            prop="poster">

                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button"
                       @click="modalPicTap('dan','poster')">
                    <div>
                      <div tabindex="0"
                           class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item"
                             style="margin:0 0 0 0;"
                             v-if="form.poster!='' && form.poster!=NULL">
                          <div class="el-image">
                            <img :src="form.poster"
                                 width="100%"
                                 height="100%"
                                 class="el-image__inner"
                                 style="object-fit: cover;">
                          </div>

                        </div>

                      </div>

                    </div>

                  </div><!---->

                </div>
              </el-form-item>

            </el-col>

            <el-col :sm="12">
              <el-form-item label="分销说明:">

                <tinymce-editor v-model="form.zq_desc"
                                :init="option" />

              </el-form-item>

            </el-col>
          </el-row>

          <el-row :gutter="20">

            <el-form-item style="margin: 0 auto;text-align: center">
              <el-button type="primary"
                         :loading="loading"
                         @click="submit">
                提交
              </el-button>
            </el-form-item>

          </el-row>

        </el-form>
      </el-card>
    </div>
    <!-- <uploadPictures :isChoice="isChoice"
                    :visible.sync="modalPic"
                    @getPic="getPic"
                    :gridBtn="gridBtn"
                    :gridPic="gridPic"
                    :title="modalTitle"></uploadPictures> -->
  </div>

</template>
  
  <script>
// import uploadPictures from "./components/uploadPictures";
import TinymceEditor from '@/components/TinymceEditor';



export default {
  name: 'SetBase',
  components: { TinymceEditor },
  data () {
    return {
      //   option: {
      //     height: 520,
      //     relative_urls: false,
      //     convert_urls: false,
      //     images_upload_handler: (blobInfo, success, error) => {
      //       debugger;
      //       const file = blobInfo.blob();
      //       // 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
      //       const formData = new FormData();
      //       formData.append('file', file, file.name);

      //       request({
      //         url: '/common/upload',
      //         method: 'post',
      //         data: formData,
      //         onUploadProgress: (e) => {  // 文件上传进度回调

      //         }
      //       }).then((res) => {
      //         if (res.data.code === 0) {
      //           success(res.data.data.url);
      //         } else {
      //           error(res.data.message);
      //         }
      //       }).catch((e) => {
      //         error('exception');
      //       });


      //     },
      //     // 自定义文件上传(这里使用把选择的文件转成blob演示)
      //     file_picker_callback: (callback, value, meta) => {
      //       const input = document.createElement('input');
      //       input.setAttribute('type', 'file');
      //       // 设定文件可选类型
      //       if (meta.filetype === 'image') {
      //         input.setAttribute('accept', 'image/*');
      //       } else if (meta.filetype === 'media') {
      //         input.setAttribute('accept', 'video/*');
      //       }
      //       input.onchange = () => {
      //         let file = input.files[0];
      //         let reader = new FileReader();
      //         reader.onload = (e) => {
      //           let blob = new Blob([e.target.result], { type: file.type });
      //           callback(URL.createObjectURL(blob));
      //         };
      //         reader.readAsArrayBuffer(file);
      //       };
      //       input.click();
      //     }
      //   },
      options: [],
      modalTitle: '选择图片',
      picTit: '',
      modalPic: false,
      isChoice: "单选",
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      // 提交状态
      loading: false,
      // 表单数据

      form: {
        handling_fee: '0.05',
        lowest_withdraw: '100',
        poster: '',
        zq_desc: '',
        id: '',
        distribution_level: 0,
        distribution_one: 0,
        distribution_two: 0
      },

      // 表单验证规则
      rules: {
        key_id: [
          {
            required: true,
            message: '请输入KEY',
            trigger: 'blur'
          }
        ],
        key_secret: [
          {
            required: true,
            message: '请输入秘钥',
            trigger: 'blur'
          }
        ],
        bucket: [
          {
            required: true,
            message: '请输入存储桶名称',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: '请输入资源访问路径',
            trigger: 'blur'
          }
        ],
        accelerate: [
          {
            required: true,
            message: '请输入加速域名',
            trigger: 'blur'
          }
        ],
        location: [
          {
            required: true,
            message: '请输入区域',
            trigger: 'blur'
          }
        ]
      },

    };
  },
  methods: {
    // 选择图片
    modalPicTap (tit, picTit) {

      this.modalTitle = picTit == "poster" ? "海报" : "轮播图";
      this.isChoice = tit === "dan" ? "单选" : "多选";
      this.modalPic = true;
      this.picTit = picTit;
    },
    // 选中图片
    getPic (pc) {

      switch (this.picTit) {
        case "poster":
          this.form.poster = pc.satt_dir;
          break;
      }
      this.modalPic = false;
    },

    /* 提交 */
    submit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          debugger;



        } else {
          return false;
        }
      });
    },

  },
  mounted () {

  }

};
  </script>
  